<template>
  <view>
    <!-- 顶部组件 -->
    <u-navbar
      :is-back="false"
      :background="searchBarBg"
      :border-bottom="false"
      id="nav-bar"
    >
      <view class="top u-flex">
        <!-- <image
          src="../../../static/navi_title_v6.png"
          class="mini-logo"
        ></image> -->
        <view
          class="search-box u-flex"
          :style="{ height: menuHeight + 'px' }"
          @click="search()"
        >
          <!-- <image src="../../../static/icon/search.png"></image> -->
          <swiper
            :indicator-dots="false"
            autoplay
            :interval="3000"
            :duration="200"
            vertical
            circular
          >
            <swiper-item
              class="u-flex"
              v-for="(item, index) in searchHotWords"
              :key="index"
            >
              <text>{{ item.queryName }}</text>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </u-navbar>
    <!-- 轮播图 -->
    <view class="swiper-bg">
      <swiper
        class="swiper"
        :indicator-dots="false"
        :autoplay="true"
        :interval="4000"
        :duration="200"
        :circular="true"
        @change="swiperChange"
      >
        <swiper-item v-for="item in swiperList" :key="item.id">
          <view class="swiper-item"
            ><image :src="item.item.pic_url" mode="aspectFill"></image
          ></view>
        </swiper-item>
      </swiper>
      <view class="swiper_dots_box">
        <view class="swiper_dots">
          <view
            v-for="(item, index) in swiperList.length"
            :key="index"
            :class="['dots_item', index == swiperCurrent ? 'dots_active' : '']"
          ></view>
        </view>
      </view>
    </view>
    <view class="page_bg">
      <!-- 金刚区导航 -->
      <view class="navigation_box">
        <view
          class="flex-center navigation"
          v-for="item in cateList"
          :key="item.iid"
          @click="kingKong(item.item.title)"
        >
          <image :src="item.item.pic_url"></image>
          <view>{{ item.item.title }}</view>
        </view>
      </view>
    </view>
    <mi-toast ref="miToast" />
  </view>
</template>

<script>
// #ifndef H5
let menuInfo = uni.getMenuButtonBoundingClientRect()
// #endif
export default {
  data() {
    return {
      top_bgc: {
        backgroundColor: '#845D32'
      },
      swiperList: [],
      swiperCurrent: 0,
      cateList: [],
      midAdTop: '',
      midAd: '',
      newUserAd: [],
      smallBanner: [],
      funding: {},
      fundingCount: 0,
      rankList: [],
      rexiaoList: [],
      timeLimit: {},
      channelList: [],
      goodsCurrentIndex: 0,
      cateTabList: [],
      cateBg: '',
      goodsCateTop: 0,
      navBarHight: 0,
      searchHotWords: [],
      goodsIndex: 0,
      goodsQueryId: '',
      goodsList: [],
      is618: false,
      changeTabLoading: false,
      loadingHeight: 0,
      loadingStatus: 'loadmore',
      loadingText: {
        loadmore: '上拉加载更多',
        loading: '努力加载中~',
        nomore: '没有更多商品了'
      },
      // #ifndef H5
      menuHeight: menuInfo.height
      // #endif
    }
  },
  onLoad() {
    console.log('应用启动')
    // console.log('当前图片网络地址为：' + this.imgUrl)
    this.getHomePageData()
    // 设置背景颜色为第一张轮播图背景色
    // this.top_bgc.backgroundColor = this.bannerList[0].top_bgc
    this.getHotWords()
  },
  methods: {
    // 获取最近搜索热词
    getHotWords() {
      this.$u.api.placeHolder().then((res) => {
        // console.log(res)
        if (res.data.length != 0) {
          this.searchHotWords = res.data
        } else {
          this.searchHotWords.push({ queryName: '搜一搜' })
        }
      })
    },
    // 获取首页全部数据
    getHomePageData() {
      this.$u.api.getHomeData().then((res) => {
        // console.log(res)
        this.disposeData(res.homepage.floors)
        // 好物榜楼层
        // console.log(res.feeds)
        // 筛选只是商品的数据
        let haowuList = res.feeds.items.filter((x) => x.type == 'goods')
        // console.log(haowuList)
        let newHaowuList = [] // 随机取四个商品，放进排行榜
        while (newHaowuList.length < 4) {
          let x = Math.floor(Math.random() * haowuList.length)
          if (newHaowuList.indexOf(haowuList[x]) == -1) {
            newHaowuList.push(haowuList[x])
          }
        }
        this.rankList = newHaowuList
        // 商品列表
        this.goodsList = res.feeds.items.filter((x) => x.type == 'goods')
      })
    },
    // 处理首页数据数据
    disposeData(item) {
      item.forEach((x, i) => {
        switch (x.module_key) {
          case 'declare_banner_new': // banner
            this.swiperList = item[i].data.items
            break
          case 'kingkong_new': // 金刚区图标
            this.cateList = item[i].data.items
            break
          case 'image_link_map': // banner
            this.midAd = item[i].data._hotspot.image
            break
          case 'single_image_new': // banner上部分
            this.midAdTop = item[i].data.pic_url
            break
          case 'new_user_guide': // 新人红包
            this.newUserAd = item[i].data.items
            break
          case 'plaza_new': // 中部小banner
            const smallBanner = item[i].data.rows
            smallBanner.forEach((x) => {
              x.items.forEach((s) => {
                this.smallBanner.push(s)
              })
            })
            break
          case 'crowd_funding_new': // 众筹模块
            this.funding.bg = item[i].data.config.card_bg_image
            this.funding.fitem = item[i].data.items[0].item
            this.funding.slist = []
            // 分割成1个大 + 2个小
            const slist = item[i].data.items.slice(1)
            slist.forEach((x) => {
              this.funding.slist.push(x.item)
            })
            break
          case 'leaderboard_new': // 热销榜
            this.rexiaoList = item[i].data.items
            break
          case 'flashsale_new': // 限时购
            this.timeLimit = item[i].data
            break
          case 'shopping_entrance': // 特色频道
            this.channelList = item[i].data.items
            break
          case 'slide_flow': // 推荐商品分类
            this.cateTabList = item[i].data.items
            break
        }
      })
    },
    // 根据轮播图切换背景颜色
    swiperChange(e) {
      // const that = this
      this.swiperCurrent = e.detail.current
      // that.swiper_bgc = this.bannerList[that.swiperCurrent].swiper_bgc
      // that.top_bgc.backgroundColor = this.bannerList[that.swiperCurrent].top_bgc
      // console.log('当前是第'+this.banner[this.current].id+'张轮播图')
    },
    kingKong(title) {
      if (title == '每日上新') {
        uni.navigateTo({
          url: '/pages/index/new/new'
        })
      } else if (title == '小米众筹') {
        uni.navigateTo({
          url: '/pages/index/crowdFunding/crowdFunding'
        })
      } else if (title == '热销排行') {
        uni.navigateTo({
          url: '/pages/index/hotRank/hotRank'
        })
      } else if (title == 'BEST') {
        uni.navigateTo({
          url: '/pages/index/BEST/BEST'
        })
      } else {
        this.showToast(title)
      }
    },
    changeTab(e) {
      if (e == this.goodsCurrentIndex) return
      this.goodsCurrentIndex = e
      this.goodsIndex = 0
      this.goodsList = []
      if (e == 1) {
        this.goodsQueryId = 'tab_feed_smart_1'
      } else if (e == 2) {
        this.goodsQueryId = 'tab_feed_electric_2'
      } else if (e == 3) {
        this.goodsQueryId = 'tab_feed_life_3'
      } else if (e == 4) {
        this.goodsQueryId = 'tab_feed_fashion_4'
      } else if (e == 5) {
        this.goodsQueryId = 'tab_feed_coupon_5'
      } else {
        this.goodsQueryId = ''
      }
      this.changeTabLoading = true
      this.getGoodsData('initial')
      this.loadingStatus = 'loading'
    },
    getGoodsData(type) {
      // type = initial 初始数据
      // type = more 更多数据
      let data = {
        index: this.goodsIndex,
        query_id: this.goodsQueryId
      }
      this.$u.api.getHomeFeeds(data).then((res) => {
        // console.log(res)
        if (type == 'initial') {
          this.goodsList = res.data.feeds.items.filter((x) => x.type == 'goods')
          this.changeTabLoading = false
        } else if (type == 'more') {
          const goodsList = res.data.feeds.items
          goodsList.forEach((x, i) => {
            // 删除不是商品的数据
            if (x.type == 'goods') {
              this.goodsList.push(x)
            }
          })
          this.goodsIndex++
          this.loadingStatus = 'loadmore'
        }
      })
    },
    search() {
      uni.navigateTo({
        url: '/pages/shop/search/search'
      })
    },
    getViewHeight() {
      let navBarHeight = 0
      let goodsCateHeight = 0
      uni
        .createSelectorQuery()
        .in(this)
        .select('#nav-bar')
        .boundingClientRect((data) => {
          navBarHeight = data.height
          uni
            .createSelectorQuery()
            .in(this)
            .select('#goods-cate')
            .boundingClientRect((data) => {
              goodsCateHeight = data.height
              // console.log(data)
              uni.getSystemInfo({
                success: (res) => {
                  this.navBarHight = (
                    navBarHeight *
                    (750 / res.windowWidth)
                  ).toFixed(2)
                  this.loadingHeight =
                    res.windowHeight - navBarHeight - goodsCateHeight
                  // console.log(res)
                }
              })
            })
            .exec()
        })
        .exec()
    },
    goToDetail(gid) {
      uni.navigateTo({
        url: '../../shop/goods/detail/detail?gid=' + gid
      })
    },
    showToast(title, type = 'success') {
      this.$refs.miToast.show({
        title,
        type
      })
    }
  },
  onReachBottom() {
    if (this.goodsList.length < 150) {
      this.getGoodsData('more')
      this.loadingStatus = 'loading'
    } else {
      this.loadingStatus = 'nomore'
    }
  },
  // onPageScroll(e) {
  // 	// console.log(e)
  // 	// 触发数字滚动
  // 	if (e.scrollTop > 500) {
  // 		this.funding.start = true
  // 		this.fundingCount++
  // 	}
  // 	if (e.scrollTop == 520) {
  // 		this.fundingCount = 2
  // 	}

  // 	if (this.fundingCount == 1 && this.funding.start) {
  // 		// 只有滚动到500像素时，才会触发数字滚动。用1计数，代表只触发一次数字滚动
  // 		this.countTo()
  // 	}
  // 	// 结束
  // },
  onReady() {
    this.getViewHeight()
  },
  computed: {
    searchBarBg() {
      return {
        background: `url('${this.imgUrl}/e6855d30-a420-11ea-9e8b-05a3242b26f2.png') no-repeat top / 100% 100%`
      }
    },
    adBanner() {
      return this.imgUrl + '/41946a10-8061-11ea-b244-a9f5e5565f30.gif'
    },
    rankListImg() {
      return {
        comment: this.imgUrl + '/f9d52d80-8d27-11ea-b997-9918a5dda011.png',
        popularity: this.imgUrl + '/f9dca790-8d27-11ea-b997-9918a5dda011.png',
        sell: this.imgUrl + '/f9d37fd0-8d27-11ea-9e8b-05a3242b26f2.png',
        rank: this.imgUrl + '/f9de5540-8d27-11ea-a30b-e311646dfaf2.png'
      }
    },
    timestamp() {
      var nowDate = Date.now()
      // end_time为秒数,乘以1000变成毫秒,减去当前毫秒数 最后再转换成秒数,让倒计时组件接收
      return (this.timeLimit.end_time * 1000 - nowDate) / 1000
    },
    seckillSession() {
      var date = new Date(this.timeLimit.start_time * 1000)
      return date.getHours()
    },
    showLoadmore() {
      return this.goodsList.length !== 0 ? true : false
    }
  },
  onShareAppMessage(res) {
    return {
      title: '你想要的，现在就要。上微购，就够了',
      path: '/pages/tabbar/index/index',
      imageUrl:
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/6ece8d90-8a3d-11ea-b94e-47f67ecf8268.png'
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.u-navbar-fixed {
  transition-property: background-color;
  transition-duration: 0.5s;
}
.top {
  width: 750rpx;
  padding: 0 22rpx;
  // transition-property: background-color;
  // transition-duration: 0.5s;
  .mini-logo {
    width: 72rpx;
    height: 62rpx;
    min-width: 72rpx;
  }
  .search-box {
    width: 440rpx;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 30rpx;
    color: #aaa;
    font-size: 26rpx;
    margin-left: 20rpx;
    /* #ifdef H5 */
    height: 64rpx;
    // width: 600rpx;
    flex: 1;
    /* #endif */
    image {
      width: 32rpx;
      height: 32rpx;
      margin: 0 20rpx 0 30rpx;
    }
    swiper {
      height: 100%;
      width: 60%;
      // text {
      // 	line-height: 60rpx;
      // }
    }
  }
}

.swiper-bg {
  // height: 280rpx;
  // transition-property: background-color;
  // transition-duration: 0.5s;
  // transition: .5s;
  background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/e68dc1a0-a420-11ea-8a36-ebb87efcf8c0.png')
    no-repeat center / 100% 100%;
}
.swiper {
  height: 290rpx;
  width: 750rpx;
  // border-radius: 12rpx;
  overflow: hidden;
  // box-sizing: border-box;
}
.swiper-item image {
  display: block;
  height: 290rpx;
  width: 706rpx;
  margin: 0 auto;
  border-radius: 12rpx;
  overflow: hidden;
}
.swiper_dots_box {
  position: relative;
}
.swiper_dots {
  position: absolute;
  bottom: 18rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 2;
}
.dots_item {
  background-color: rgba(0, 0, 0, 0.15);
  height: 6rpx;
  width: 18rpx;
  border-radius: 6rpx;
  margin: 0 6rpx;
  /* transition: 0.3s; */
}
.dots_active {
  background-color: #fff;
  width: 32rpx;
}
.page_bg {
  background-color: #f9f9f9;
  // border-radius: 48rpx 48rpx 0 0;
  // margin-top: -110rpx;
  // padding-top: 150rpx;
  padding-bottom: 20rpx;
  // box-sizing: border-box;
}
.navigation_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 28rpx;
  background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/e67ad5e0-a420-11ea-8a36-ebb87efcf8c0.png')
    no-repeat center / 100% 100%;
}
.navigation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
  margin-bottom: 28rpx;
  font-size: 24rpx;
  color: #444;
  text-align: center;
}
.navigation image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}
.mid-ad {
  text-align: center;
  // margin-bottom: 10rpx;
  width: 750rpx;
  height: 208rpx;
  background-color: #f9f9f9;
  image {
    width: inherit;
    height: inherit;
  }
}

.red_packets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  image {
    height: 230rpx;
    width: 49%;
    border-radius: 18rpx;
    overflow: hidden;
  }
}
.mini_banner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 22rpx;
  margin-top: 24rpx;
  image {
    margin-bottom: 10rpx;
    border-radius: 12rpx;
  }
}
.p4 {
  image {
    width: 49%;
    height: 186rpx;
  }
}
.p6 {
  image {
    width: 32.6%;
    height: 280rpx;
  }
}
.floor {
  // background-color: #ee8a52;
  background-color: #d84846;
  padding: 10rpx 0;
}
.card {
  position: relative;
  width: 706rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 20rpx auto;
  padding: 28rpx 20rpx 24rpx;
  overflow: hidden;
  .head {
    display: flex;
    align-items: center;
    .title {
      font-size: 38rpx;
      font-weight: bold;
      color: #2e2e2e;
    }
    .more {
      display: flex;
      align-items: center;
      margin-left: auto;
      font-size: 26rpx;
      color: #9c9c9c;
    }
  }
}
.zhongchou {
  color: rgb(51, 51, 51);
  .head,
  .fitem {
    position: relative;
    z-index: 2;
  }
  .tag {
    display: inline-block;
    width: 36rpx;
    height: 36rpx;
    border-radius: 4rpx;
    line-height: 36rpx;
    color: rgb(255, 255, 255);
    font-size: 22rpx;
    text-align: center;
    margin-right: 10rpx;
  }
  .fundingBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    border-radius: 12rpx 12rpx 0 0;
    z-index: 1;
  }
  .fitem {
    margin-top: 20rpx;
    .item {
      display: flex;
      justify-content: space-between;
      height: 264rpx;
      .desc {
        display: flex;
        flex-direction: column;
        .title {
          font-size: 30rpx;
          margin-top: 8rpx;
          white-space: pre-wrap;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .sub {
          max-width: 410rpx;
          font-size: 22rpx;
          color: rgb(125, 68, 2);
          margin-top: 10rpx;
          padding: 0 8rpx;
          background-color: rgb(255, 249, 227);
          border: 1rpx solid rgb(245, 235, 209);
          border-radius: 4rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .price {
          margin-top: 20rpx;
          font-size: 22rpx;
          color: rgb(254, 31, 29);
          font-weight: bold;
          font-family: 'AllAndNone';
          text:last-child {
            font-size: 28rpx;
          }
        }
        .count {
          margin-top: auto;
          image {
            width: 36rpx;
            height: 36rpx;
            border-radius: 4rpx;
            margin-right: 10rpx;
            vertical-align: bottom;
          }
          text {
            white-space: pre-wrap;
            font-size: 22rpx;
            line-height: 28rpx;
            margin-right: 2px;
          }
          .num {
            color: rgb(238, 136, 66);
          }
        }
      }
      .img {
        width: 264rpx;
        height: 264rpx;
      }
    }
  }
  .sitem {
    display: flex;
    justify-content: space-between;
    .item {
      margin-top: 20rpx;
      width: 48%;
      .title {
        font-size: 26rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .desc {
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;
        image {
          width: 150rpx;
          height: 150rpx;
        }
        .price {
          font-size: 22rpx;
          color: rgb(254, 31, 29);
          font-weight: bold;
          font-family: 'AllAndNone';
          text:last-child {
            font-size: 28rpx;
          }
        }
      }
      .count {
        image {
          width: 36rpx;
          height: 36rpx;
          border-radius: 4rpx;
          margin-right: 10rpx;
          vertical-align: bottom;
        }
        text {
          white-space: pre-wrap;
          font-size: 22rpx;
          line-height: 28rpx;
          margin-right: 2px;
        }
        .num {
          color: rgb(238, 136, 66);
        }
      }
    }
  }
  .progress {
    margin-top: 6rpx;
    height: 8rpx;
    border-radius: 4rpx;
    background-color: #eee;
    .complete {
      height: inherit;
      overflow: hidden;
      border-radius: 4rpx;
      .full-color {
        height: inherit;
        background-image: linear-gradient(to right, #ffc866, #ff581b);
      }
    }
  }
  .pro-fitem {
    width: 666rpx;
  }
  .pro-sitem {
    width: 320rpx;
  }
}
.haowu {
  .list {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    .item {
      position: relative;
      width: 216rpx;
      height: 284rpx;
      background-color: #f7f7f7;
      border-radius: 12rpx;
      overflow: hidden;
      text-align: center;
      .goodsImg {
        width: 216rpx;
        height: 216rpx;
        // margin-top: 20rpx;
      }
      .paihangImg {
        width: 160rpx;
        height: 160rpx;
        margin-top: 40rpx;
      }
      .desc {
        position: absolute;
        bottom: 6rpx;
        width: 100%;
        text-align: center;
        font-size: 26rpx;
        color: #905a18;
        z-index: 2;
        view:last-child {
          font-size: 22rpx;
        }
      }
      .bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 112rpx;
        z-index: 1;
      }
      .subTitle {
        position: absolute;
        top: 6rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
        z-index: 2;
      }
      .paihangBg {
        height: 100%;
      }
    }
  }
}
.rexiao {
  padding: 28rpx 0 24rpx;
  .head {
    padding: 0 20rpx;
    .subTitle {
      align-self: flex-end;
      white-space: nowrap;
      font-size: 22rpx;
      color: rgb(153, 153, 153);
      margin-left: 10rpx;
      margin-bottom: 6rpx;
      max-width: 360rpx;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  scroll-view {
    white-space: nowrap;
    margin-top: 26rpx;
    .scoll-wrapper {
      display: flex;
      align-items: center;
      .goods {
        position: relative;
        width: 216rpx;
        height: 316rpx;
        margin-left: 20rpx;
        background: url(../../../static/LeaderboardBg.png) no-repeat center /
          216rpx 316rpx;
        border-radius: 6rpx;
        // overflow: hidden;
        .labelImg {
          position: absolute;
          top: 0;
          left: 0;
          width: 44rpx;
          height: 48rpx;
        }
        .goodsImg {
          width: 216rpx;
          height: 216rpx;
        }
        .desc {
          white-space: pre-wrap;
          font-size: 22rpx;
          width: 174rpx;
          margin: 16rpx auto 0;
          text-align: center;
          text-overflow: ellipsis;
          color: rgb(125, 68, 2);
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .label {
          white-space: nowrap;
          position: absolute;
          top: 194rpx;
          font-size: 20rpx;
          color: #fff;
          text-overflow: ellipsis;
          height: 32rpx;
          line-height: 32rpx;
          padding-left: 12rpx;
          padding-right: 12rpx;
          background-color: rgb(255, 90, 27);
          width: 216rpx;
          border-radius: 4rpx;
          overflow: hidden;
        }
      }
    }
  }
}
.miaosha {
  .head {
    .changci {
      font-size: 24rpx;
      color: #555;
      font-weight: bold;
      margin: 0 12rpx 0 24rpx;
    }
    .countDown {
      font-family: 'BebasNeue';
    }
  }
  scroll-view {
    white-space: nowrap;
    margin-top: 26rpx;
    .scoll-wrapper {
      display: flex;
      align-items: center;
      .goods {
        width: 185rpx;
        margin-left: 20rpx;
        /* background-color: #00C300 */
        image {
          width: 185rpx;
          height: 185rpx;
          border-radius: 6rpx;
          overflow: hidden;
          // background-color: #f7f7f7;
        }
      }
      .goods:first-child {
        margin-left: 0;
      }
      .price {
        font-size: 24rpx;
        color: rgb(254, 31, 29);
        font-family: 'AllAndNone';
        text:nth-child(1) {
          margin-left: 11rpx;
        }
        text:nth-child(2) {
          font-size: 28rpx;
          font-weight: 600;
          /* margin-left:2rpx; */
        }
        text:nth-child(3) {
          color: #9e9e9e;
          text-decoration: line-through;
          margin-left: 6rpx;
        }
      }
    }
  }
}
.channel {
  padding: 0 0 20rpx 0;
  display: flex;
  .item {
    width: 25%;
    text-align: center;
    .mainTitle,
    .subTitle {
      margin: 0 auto;
      white-space: nowrap;
      max-width: 140rpx;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .mainTitle {
      margin-top: 18rpx;
      font-size: 34rpx;
      color: rgb(51, 51, 51);
      // margin-left: 9px;
      font-weight: bold;
      height: 50rpx;
    }
    .subTitle {
      font-size: 22rpx;
      color: rgb(209, 148, 50);
      // margin-left: 9px;
      text-overflow: ellipsis;
      height: 34rpx;
    }
    image {
      width: 156rpx;
      height: 156rpx;
    }
  }
}
.goods_cat {
  // position: sticky;
  height: 122rpx;
  padding: 16rpx 0 6rpx;
  white-space: nowrap;
  z-index: 11;
  box-sizing: border-box;
  // transition: 0.4s;
  width: 750rpx;
  flex-direction: row;
  .box {
    display: flex;
    align-items: center;
    .detail {
      position: relative;
      width: 136rpx;
      height: 100rpx;
      text-align: center;
      &:nth-child(1) {
        margin-left: 20rpx;
      }
      view {
        transition: 0.1s;
      }
      view:nth-child(1) {
        width: 136rpx;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 32rpx;
        color: #282828;
        font-weight: bold;
      }
      view:nth-child(2) {
        font-size: 24rpx;
        color: #999999;
      }
      &::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        display: block;
        width: 2rpx;
        height: 32rpx;
        background-color: #dddddd;
      }
      &:nth-child(1)::before {
        content: '';
        display: none;
      }
      &::after {
        position: absolute;
        display: none;
        bottom: 6rpx;
        left: 50%;
        transform: translate(-50%, 50%);
        content: '';
        height: 8rpx;
        width: 52rpx;
        border-radius: 8rpx;
        background: #c30d23;
      }
    }
    .active {
      view:nth-child(1) {
        font-size: 40rpx;
        color: #c30d23;
      }
      view:nth-child(2) {
        color: #c30d23;
      }
      &::after {
        display: block;
      }
    }
  }
}

.goodslist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20rpx;
  .item {
    position: relative;
    width: 346rpx;
    height: 506rpx;
    border-radius: 8rpx;
    background-color: #ffffff;
    margin-top: 24rpx;
    font-size: 28rpx;
    overflow: hidden;
    & > image:nth-child(1) {
      width: 346rpx;
      height: 346rpx;
      border-radius: 8rpx 8rpx 0 0;
    }
    & > image:nth-last-child(2) {
      position: absolute;
      bottom: 32rpx;
      right: 22rpx;
      width: 24rpx;
      height: 6rpx;
    }
    .labelbox {
      position: absolute;
      top: 308rpx;
      left: 0;
      text {
        display: inline-block;
        border-radius: 4rpx;
        // background-color: #d96b6c;
        color: #ffffff;
        margin-right: 10rpx;
        text-align: center;
        height: 32rpx;
        padding: 0 10rpx;
        line-height: 32rpx;
        font-size: 24rpx;
      }
    }
    .title,
    .subtitle {
      width: 346rpx;
      padding-left: 16rpx;
      padding-right: 6rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      -webkit-box-pack: center;
      overflow: hidden;
    }
    .title {
      font-size: 30rpx;
      color: rgb(51, 51, 51);
      line-height: 42rpx;
      margin-top: 6rpx;
    }
    .subtitle {
      font-size: 26rpx;
      color: rgb(153, 153, 153);
      margin-top: 4rpx;
      line-height: 36rpx;
    }
    .price {
      margin: 10rpx 0 0 16rpx;
      color: rgb(227, 13, 13);
      font-size: 26rpx;
      height: 40rpx;
      font-family: 'AllAndNone';
      .priceMin {
        font-size: 34rpx;
        margin-right: 4rpx;
        font-weight: bold;
      }
      .marketPrice {
        margin-left: 6rpx;
        font-size: 28rpx;
        color: rgb(153, 153, 153);
        text-decoration: line-through;
      }
      .spec {
        font-size: 24rpx;
      }
    }
    .menu {
      position: absolute;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 2;
      view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300rpx;
        height: 70rpx;
        margin: 16rpx auto;
        border-radius: 70rpx;
        background-color: #ffffff;
      }
      text {
        display: block;
        width: 140rpx;
        margin-left: 8rpx;
      }
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
.pageLoading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #f9f9f9;
  z-index: 800;
}
.changeTabLoading {
  position: relative;
  width: 750rpx;
  // height: 1000rpx;
}
full-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
